<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo09-组件之前-自定义事件</title>
</head>
<!-- <script src="../libs/vue.js"></script> -->
<style>
  #app {
    height: 400px;
    width: 600px;

    border: 1px solid black;
  }
</style>
<body> 
    <div id="app"> 

    </div>
    <button onclick="fireevent()">触发客制化事件</button>
</body>
<script>

let div = document.getElementById("app");
div.addEventListener("myevent", (event) => { 
  alert("DIV: " + event.detail); 
});

/**
 * DOM3 增加了自定义事件的类型。自定义事件不会触发原生 DOM 事件，但可以让开发者定义自己
的事件。
*/
console.log('浏览器是否支持客制化事件：',document.implementation.hasFeature("CustomEvents", "3.0"));

let event = document.createEvent("CustomEvent"); 
  event.initCustomEvent("myevent", true, false, "Hello world!"); 


function fireevent (){

 div.dispatchEvent(event);
}

setTimeout( fireevent, 3000 );


</script>
</html>